<template>
	<view>
		<view class="top">
			<view class="top1">
				<view style="font-size: 20px;color: white;">{{totalMoney-totalMoney1}}</view>
				<view style="color: white;">当前现金余额（元）</view>
				<view><button class="button" type="primary" @click="tx_btn">提现</button></view>
			</view>
			<view class="top2">
				<view style="color: white;">累计收入（元）：{{totalMoney}}元</view>
				<view style="color: white;">累计提现（元）：{{totalMoney1}}元</view>
			</view>
		</view>

		<uni-card style="margin-top: -32px;border-radius: 10px;">
			<view class="tit">收支明细</view>
			<u-divider text=""></u-divider>
			<view v-for="(item,index) in shouzhi" :key="index">
				<uni-section style="margin-top: -10px;margin-bottom: -10px;" :title="'类别: ' + item.title"
					:sub-title="'核销时间: ' + item.verificationTime">
					<template v-slot:right>
						<text style="color:#FF6532 ;">{{item.money}}</text>
					</template>
				</uni-section>
				<u-divider text=""></u-divider>
			</view>
			<!-- <uni-section style="margin-top: -10px;margin-bottom: -10px;" title="提现" sub-title="核销时间:2022-10-12 11:09">
				<template v-slot:right>
					<text style="color:#FF6532 ;">+200</text>
				</template>
			</uni-section> -->
		</uni-card>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				money1: '',
				shouzhi: [],
				// token: "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY0YWFkZjI3LTk2ZTMtNGU0OS04YzA0LTA1OWZkMWRjN2RhMSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.GQn4iDgsaLZNt8gxNDyLSegMcmOwUqWvG3h8pwazDF26KGbSMbHw_yoyqV1x8dgX-1L1fgmF5yRdaUDmSx_EZA"

			}
		},
		onLoad() {
			// uni.setStorageSync("token", this.token);
			this.budgetlist();
		},
		computed: {
			// 计算 totalMoney 总和
			totalMoney() {
				this.money = this.shouzhi.reduce((sum, item) => sum + item.money, 0);
				return this.shouzhi.reduce((sum, item) => sum + item.money, 0);



				// this.money = this.shouzhi.reduce((sum, item) => {
				// 	const total = item.drawal.reduce((totalSum, subItem) => totalSum + subItem.money, 0);
				// 	return sum + total;
				// }, 0);
				// return this.shouzhi.reduce((sum, item) => {
				// 	const total = item.drawal.reduce((totalSum, subItem) => totalSum + subItem.money, 0);
				// 	return sum + total;
				// }, 0);
			},




			totalMoney1() {

				this.money1 = this.shouzhi.reduce((sum, item) => {
					const total = item.drawal.reduce((totalSum, subItem) => totalSum + subItem.money, 0);
					return sum + total;
				}, 0);
				return this.shouzhi.reduce((sum, item) => {
					const total = item.drawal.reduce((totalSum, subItem) => totalSum + subItem.money, 0);
					return sum + total;
				}, 0);
			},

			// totalMoney1() {
			// 	this.money1 = this.shouzhi.reduce((sum, item) => sum + item.drawal[0].money, 0);
			// 	return this.shouzhi.reduce((sum, item) => sum + item.drawal.money, 0);
			// }
		},
		methods: {

			tx_btn() {
				console.log(this.money - this.money1); // 打印计算结果
				uni.navigateTo({
					url: `/pages/ly/budget/payout?moneys=${this.money - this.money1}`
				});
			},

			budgetlist() {
				let that = this;
				this.$http({
					url: '/api/shanghuliebiao2/statement/list',
					method: 'GET',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res)
							that.shouzhi = res.data.rows
							console.log(that.shouzhi)
						} else {
							alert("错误")
						}

					}
				})
			}
		},
	}
</script>

<style>
	.top {
		height: 150px;
		display: flex;
		background-image: url(../../../static/images/ly/组 6.png);
	}

	.button {
		height: 27px;
		width: 100px;
		font-size: 15px;
		background-color: #FF6532;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.top1 {
		height: 100px;
		display: flex;
		flex-direction: column;
		/* 设置为列方向布局 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
		text-align: center;
		/* 确保文本在子元素中居中 */
		width: 50%;
		border-right: 1px solid white;
	}

	.top2 {
		height: 100px;
		display: flex;
		flex-direction: column;
		/* 设置为列方向布局 */
		justify-content: center;
		/* 垂直居中 */
		margin-left: 15px;
	}

	.tit {
		font-size: 16px;
		font-weight: bold;
	}
</style>